<template>
  <div class="w-container">
    <el-dialog
      :title="'设置分组属性'"
      :visible.sync="dialogVisible"
      :width="'500px'"
      class="w-lhb-dialog"
    >
      <el-form :rule="rules" ref="form" :model="form" class="lhb-form" label-width="100px">
        <el-form-item label="分组属性：" prop="name" class="el-col el-col-20">
          <el-select v-model="form.name" placeholder="请选择" style="width:100px">
            <el-option
              v-for="item in nameOptions"
              :key="item.extName"
              :label="item.name"
              :value="item.extName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" size="small" @click="onSubmitForm('form')">确定</el-button>
      </span>
    </el-dialog>
    <div class="w-aside" :class="isCollapse?'hideSidebar':''">
      <div class="w-out-in" style="height:30px">
        <i class="el-icon-sort" @click="dialogVisible=true" style="transform:rotate(90deg)"></i>
      </div>
      <el-scrollbar
        wrap-class="scrollbar-wrapper w-scrollbar-wrapper"
        style="height:calc(100%-58px)"
      >
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          @select="menuSelect"
          :collapse="isCollapse"
          :default-openeds="defaultOpenedsArr"
        >
          <menuTree
            @sideClick="sideClick"
            v-for="item in sideList"
            :key="item.value"
            :menu="item"
            :isCollapse="isCollapse"
          ></menuTree>
        </el-menu>
      </el-scrollbar>
      <div class="w-out-in">
        <i class="el-icon-d-arrow-right" v-if="isCollapse" @click="isCollapse = false"></i>
        <i class="el-icon-d-arrow-left" v-else @click="isCollapse = true"></i>
      </div>
    </div>
    <div
      class="w-main-morebox"
      :style="{width:isCollapse==true?'calc(100%-50px)':'calc(100%-200px)'}"
    >
      <div class="w-main-morebox-index">
        <div style="height:100%">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            :stretch="false"
            class="w-index-manager-tabs"
            @tab-remove="removeTab"
            @tab-click="tabClick"
          >
            <el-tab-pane
              :key="editableTabsfirst[0].name"
              :label="editableTabsfirst[0].title"
              :name="editableTabsfirst[0].name"
            >
              <div class="checkbox-index">
                <div class="btn-box">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="downloadClick"
                    :disabled="isAllowed"
                  >导出</el-button>
                </div>
                <el-table
                  class="tableList"
                  :max-height="tableHeight"
                  :data="tableDataFirst"
                  row-key="getRowKey"
                  fit
                  border
                  stripe
                  highlight-current-row
                  @select-change="handleSelectionChange"
                  @select="handleSelect"
                  @select-all="handleSelect"
                >
                  <el-table-column type="selection" width="40"></el-table-column>
                  <el-table-column type="index" label="序号" :index="indexMethod" width="40"></el-table-column>
                  <el-table-column label="名称" property="name" width="120">
                    <template slot-scope="scope">
                      <span style="cursor:pointer" @click="nameClick(scope.row)">{{scope.row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="值" property="value" show-overflow-tooltip></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MenuTree from "./MenuTree";
export default {
  props: { isAllowed: Boolean },
  components: {
    MenuTree,
  },
  data() {
    return {
      isCollapse: false,
      dialogVisible: false,
      rules: {
        name: [{ required: true, message: "请选择分组属性", trigger: "blur" }],
      },
      form: { name: "" },
      defaultActive: "",
      sideList: [
        {
          value: "indexSys",
          name: "指标体系",
          meta: { icon: "el-icon-document", title: "指标体系" },
          children: [
            {
              value: "183",
              name: "管理域",
            },
            {
              value: "204",
              name: "工程域",
            },
          ],
        },
        {
          value: "indexManagement",
          meta: { icon: "el-icon-document", title: "指标管理" },
          children: [
            {
              value: "firstPage",
              meta: {
                icon: "el-icon-document",
                title: "首页指标管理",
              },
              children: null,
            },
            {
              value: "managementPage",
              meta: {
                icon: "el-icon-document",
                title: "首页配置管理",
              },
              children: null,
            },
          ],
        },
      ],
      //   isAllowed:false,
      defaultOpenedsArr: [],
      nameOptions: [
        {
          extName: "1",
          name: "指标领域",
        },
        {
          extName: "2",
          name: "指标类别",
        },
        {
          extName: "3",
          name: "统计粒度",
        },
        {
          extName: "4",
          name: "统计频率",
        },
      ],
      resName: {
        data: [
          { name: "工程域", value: "117" },
          { name: "管理域", value: "129" },
          { name: "AA域", value: "118" },
          { name: "测试", value: "120" },
        ],
      },
      editableTabsValue: "1",
      editableTabsfirst: [{ title: "首页", name: "1" }],
      tableDataFirst: [
        { name: "管理域", value: "183" },
        { name: "工程域", value: "184" },
      ],
      tabIndex: 2,
      tableHeight:
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        280,
      multipleSelection: [],
      selectList: [],
      indexSysChild: [],
    };
  },
  watch: {
    isCollapse() {
      this.$emit("isCollapseChange", this.isCollapse);
      console.log(this.isCollapse, "sss");
    },
    editableTabs(val) {
      if (this.editableTabs.lenght == 0) {
        this.editableTabsValue = "1";
      }
    },
  },
  mounted() {
    this.initSide();
    window.addEventListener("resize", this.changeWindow);
  },
  destroyed() {
    window.removeEventListener("resize", this.changeWindow);
  },
  methods: {
    changeWindow() {
      this.tableHeight =
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        280;
    },
    getRowKey(row) {
      return row.value;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelect(val) {
      this.selectList = val;
    },
    indexMethod(index) {
      return index + 1;
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "New Tab",
        name: newTabName,
      });
      this.editableTabsValue = newTabName;
    },
    initSide() {
      this.getSideList(this.nameOptions[0].extName);
      this.form.name = this.nameOptions[0].extName;
    },
    getSideList(info) {
      this.resName.data.map((item) => {
        item.children = null;
        item.fextName = info;
        item.meta = { icon: "el-icon-setting", title: item.name };
      });
      this.defaultOpenedsArr = ["indexSys"];//默认展开第一个父级
      this.indexSysChild = this.resName.data;
      this.sideList.map((v) => {
        if (v.value == "indexSys") {
          v.children = this.resName.data;
        }
      });
      this.tableDataFirst = this.resName.data;
    },
    nameClick(row) {
      this.$emit("updateTablePage", "index");
      this.$nextTick(() => {
        let isreset = this.editableTabs.find((item) => {
          return item.name == row.value;
        });
        if (!row.name || row.value) return;
        if (!isreset) {
          this.editableTabs.push({
            title: row.name,
            name: row.value,
          });
          this.editableTabsValue = row.value;
          this.defaultActive = row.value;
        } else {
          this.editableTabsValue = row.value;
        }
        this.rowfextName=row.fextName
        this.rowValue=row.value
        this.rowName=row.name
      });
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName == targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      this.$nextTick(() => {
        this.defaultActive = tabs.lenght == 1 ? "indexSys" : activeName;
      });
    },
    tabClick(v, name) {
      this.defaultActive = v.name;
      this.menuSelect(v, name);
      if (v.name == "1") {
        this.getSideList(this.form.name);
      }
    },
    downloadClick() {},
    onSubmitForm(formName) {
      this.$refs[formName].validate(async (vaild) => {
        if (vaild) {
          this.dialogVisible = false;
        }
      });
    },
    sideClick(key) {},
    menuSelect(key, keyPath) {
      this.sideActive = key;
      let selectItem = [];
      this.sideList.map((item) => {
        if (item.value == "indexSys") {
          if (item.children && item.children.length > 0) {
            item.children.map((citem) => {
              console.log(citem, "citem");

              if (citem.value == key) {
                selectItem = citem;
              }
            });
          }
        }
      });
      console.log(selectItem, "selectItem");
      if (!selectItem.name || !selectItem.value) return;
      let isreset = this.editableTabs.find((item) => {
        return item.name == key;
      });
      if (!isreset) {
        this.editableTabs.push({
          title: selectItem.name,
          name: selectItem.value,
        });
        this.editableTabsValue = key;
      } else {
        this.editableTabsValue = key;
      }
      this.rowfextName = selectItem.fextName;
      this.rowValue = selectItem.value;
      this.rowName = selectItem.name;
      this.$nextTick(()=>{
        let name='detailsTable' +this.rowfextName
        this.$refs[name][0].getList(
          this.rowfextName,
          this.rowValue,
          this.rowName
        )
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.w-lhb-dialog {
  .lhb-form {
    overflow: hidden;
    .el-form-item {
      margin-left: 10px;
      margin-bottom: 25px;
    }
  }
}
.el-menu-vertical-demo {
  height: calc(100%-50px);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: calc(100%-60px);
}
.w-container {
  display: flex;
  overflow: hidden;
  .w-aside {
    height: 100%;
    background: #fff;
    .w-out-in {
      width: 100%;
      height: 20px;
      background: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      cursor: pointer;
      position: relative;
      > i {
        position: absolute;
        right: 10px;
      }
      .el-icon-sort {
        top: 10px;
        // background: #1890ff;
        color: #1890ff;
        font-weight: bold;
        border-radius: 50%;
        padding: 2px;
        border: 2px solid #1890ff;
      }
    }
  }
  .w-main-morebox {
    width: 100%;
    height: 430px;
    // height: 100%;
  }
}
.w-main-morebox-index {
  background: #fff;
  margin-left: 10px;
  height: 100%;
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.w-index-manager-tabs {
  height: 100%;
  padding: 10px;
  ::v-deep #tab-1 {
    .el-icon-close {
      display: none;
    }
  }
}
</style>
<style lang="scss">
.w-scrollbar-wrapper {
  overflow-x: hidden;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
#app ::v-deep .hideSidebar {
  .sidebar-container {
    width: 54px !important;
    height: 100%;
  }
  .main-container {
    margin-left: 54px;
  }
  .svg-icon {
    margin-right: 0;
  }
  .el-scrollbar .el-menu-item i {
    margin-right: 18px;
  }
  .submenu-title-noDropdown {
    padding: 0 !important;
    position: relative;
    .el-tooltip {
      padding: 0 20px !important;
      .svg-icon {
        margin-left: 10px;
      }
    }
  }
  .el-submenu {
    overflow: hidden;
    & > .el-submenu__title {
      padding: 0 20px !important;
      .svg-icon {
        margin-left: 20px;
      }
      .el-submenu__icon-arrow {
        display: none;
      }
    }
  }
  .el-menu--collapse {
    .el-submenu {
      & > .el-submenu__title {
        & > span {
          height: 0;
          width: 0;
          overflow: hidden;
          visibility: hidden;
          display: inline-block;
        }
      }
    }
  }
}
</style>